<template>
  <div>
    <div class="contact-item section" v-for="(card,index) in contact_ways" :key="index">
      <FormItem label="联系方式">
        <select v-model="card.type" @change="cardTypeChange(card)">
          <option value="">请选择联系方式</option>
          <option v-for="(type,key) in pageData.contact_ways" :value="key" :key="key">{{type}}</option>
        </select>
      </FormItem>
      <FormItem label="联系信息／ID">
        <div class="phone-item-box" v-if="showAreaCodeView(card.type)">
          <div class="phone-item-code" @click="changeCode(index)">
            <span>+{{card.code}}</span>
            <i class="css-arrow-down"></i>
          </div>
          <Input type="tel" class="phone-item-input" v-model="card.value" placeholder="请输入对应的联系信息或ID"/>
        </div>
        <Input type="tel" v-else v-model="card.value" placeholder="请输入对应的联系信息或ID"/>
      </FormItem>
      <button class="btn btn-danger btn-block btn-outline" v-if="index !== 0" @click="delCard(index)">删除此联系方式</button>
    </div>

    <div class="section">
      <button class="btn btn-primary btn-block btn-outline" @click="addCard">+添加其他联系方式</button>
    </div>

    <div class="section">
      <FormItem label="您常居住的地址">
        <Input v-model="contact_address" placeholder="请输入常居住的地址"/>
      </FormItem>
      <FormItem label="国家">
        <select v-model="contact_country">
          <option value="">请选择</option>
          <option :value="country" v-for="(country,cidx) in pageData.countries" :key="cidx">{{country}}</option>
        </select>
      </FormItem>
      <FormItem label="邮区编号">
        <Input v-model="postcode" filter="int" placeholder="请输入邮区编号"/>
      </FormItem>
    </div>

    <div class="page-footer">
      <button class="btn btn-primary btn-block" :disabled="!formValid" @click="submit">下一步</button>
    </div>
  </div>
</template>
<script>
import Input from '~/components/Input';
import Radio from '~/components/Radio'
import Checkbox from '~/components/Checkbox'
import FormItem from '~/components/CompleteItem'

export default {
  components:{
    Input,
    Radio,
    FormItem,
    Checkbox
  },
  asyncData(context) {
    const { store,route,query } = context;
    let rs = {
      contact_ways:[],
      contact_country:'',
      postcode:'',
      contact_address:'',
      step:4,
      pageData:{},

      //记录获取area_code的索引,默认为无
      area_code_index:false
    }
    // 为了保证从区号选择返回是能带回之前的表单数据
    if(route.params.country && route.params.data){
      rs = route.params.data;
      rs.contact_ways[rs.area_code_index].code = route.params.country.code;
    }
    return rs;
  },
  computed:{
    formValid(){
      return true;
    },
    showAreaCodeView(){ // 判断是否需要选择区号
      return (type)=>{
        //phone phone
        //potato Potato
        //telegram Telegram
        return ['phone','potato','telegram'].indexOf(type) !== -1;
      }
    }
  },
  async mounted(){
    this.$emit('setTitle','联系方式')
    this.$store.commit('completeInfo/setStep',this.$route.name);
    if(!Object.keys(this.pageData).length) await this.getCompleteInfo();

    let classList = document.querySelector('body').classList;
    if(!classList.contains('bg-white')){
      this.needAddClass = true;
      classList.add('bg-white');
    }
  },
  methods:{
    changeCode(index){//修改联系方式的area_code
      this.area_code_index = index;
      this.$router.push({
        name:'area_list',
        query:{from:this.$route.name},
        params:{
          from:this.$route.name,
          data:this.$data,
        }
      })
    },
    async getCompleteInfo(){
      this.$emit('loading',true);
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=get_complete_info',{
          step:this.step,
        })
        if(rs.code == 0){
          this.pageData = rs.data;
          let {page_data} = rs.data;

           //初始化数据
          if(page_data.contact_ways.length){
            this.contact_ways = page_data.contact_ways;
          }else{
            this.addCard();
          }
          this.contact_country = page_data.contact_country;
          this.postcode = page_data.postcode;
          this.contact_address = page_data.contact_address
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.$emit('loading',false);

    },
    delCard(idx){
      this.contact_ways.splice(idx,1);
    },
    addCard(){
      this.contact_ways.push({
        type:'',
        code:'',
        value:''
      })
    },
    cardTypeChange(card){//类型切换
      switch(card.type){
        case 'phone':
        case 'telegram':
          card.code = "855";
          break;
        case 'potato':
          card.code = '354'
          break;
      }
    },
    submit(){
      if(this.loading) return false;
      if(!this.formValid){
        this.$toast('请完善表单信息');
        return false;
      }

      this.$emit('submit',{
        step:this.step,
        contact_ways:this.contact_ways,
        contact_country:this.contact_country,
        postcode:this.postcode,
        contact_address:this.contact_address,
      },()=>{
        this.$router.push({name:'complete_info-like'});
      })

    }
  }
}
</script>
<style lang="less" scoped>
.page-top-tip {
  margin-bottom:40px;
  font-size:24px;
  color:#c0c3cc;
  code {
    color:#f05521;
    font-style: normal;
  }
}

.section + .section {
  border-top: 14px solid #edeef0;
}

</style>

